import React      from 'react';
import { Link }   from 'react-router-dom';

import MUtil      from 'util/mm.jsx';
import Product       from 'service/product-service.jsx';

import PageTitle  from 'component/page-title/index.jsx';
import ListSearch  from './index-list-search.jsx';
import TableList  from 'util/table-list/index.jsx';
import Pagination from 'util/pagination/index.jsx'

import './index.scss'

const __mm      = new MUtil();
const __product = new Product();

class ProductList extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      // list 需要先做一个初始化，不然一开始的时候，list不是一个数组，就不能用 map
      list        : [],
      pageNum     : 1,
      listType    : 'list'
    };
  }

  // 调用 loadUserList 的生命函数
  componentDidMount(){
    this.loadProductList();
  }

  // 加载商品列表( 和 搜索后的列表)
  loadProductList(){
    let listParam = {};
    // 不管是搜索 还是 请求列表，下面两个参数都是必须的
    listParam.listType = this.state.listType;
    listParam.pageNum = this.state.pageNum;

    // 判断是在搜索 还是 没有在搜索
    // 如果请求的是 搜索接口的话，需要传入 搜索类型 和 搜索关键字
    if(this.state.listType === 'searchType'){
      listParam.searchType = this.state.searchType
      listParam.keyword = this.state.searchKeyword
    }
    // 请求接口
    __product.getProductList(listParam).then(res => {
      this.setState(res)
    }, errMsg => {
      // 假如接口请求错误的话，我们应该把原来的数据删掉
      this.setState({
        list: []
      });
      __mm.errorTips(errMsg);
    });
  }
  
  // 搜索功能
  onSearch(searchType, searchKeyword){
    // console.log(searchType, searchKeyword);
    let listType = searchKeyword === '' ? 'list' : 'searchType';
    this.setState({
      listType      : listType,
      pageNum       : 1,
      searchType    : searchType,
      searchKeyword : searchKeyword
    }, () => {
      this.loadProductList();
    })
  }

  // 当分页页面的页数发生变化的时候
  // setState 是一个异步函数
  onPageNumChange(pageNum){
    this.setState({
      pageNum
    }, () => {
      this.loadProductList();
    });
  }

  // 改变商品状态， 上架 / 下架
  onSetProductStatus(e, productId, currentStatus){
    let newStatus = currentStatus === 1 ? 2 : 1,
        confirmtips = currentStatus === 1 ? '确定要下架该商品吗' : '确定要上架该商品吗';
    if(window.confirm(confirmtips)){
      __product.setProductStatus({
        productId: productId,
        status: newStatus
      }).then(res => {
        __mm.successTips(res);
        // 成功之后，这块要重新加载一下
        this.loadProductList();
      }, errMsg => {
        __mm.errorTips(errMsg);
      })
    }
  }

  // new Data(user.createTime).toLocaleString() 这就将其转化为了当地的一个时间
  render(){
    let tableHeads = [
      {name: '商品ID', width: '10%'},
      {name: '商品信息', width: '50%'},
      {name: '价格', width: '10%'},
      {name: '状态', width: '15%'},
      {name: '操作', width: '15%'}
    ];
    return (
      <div id="page-wrapper">
        <PageTitle title="商品列表">
          <div className="page-header-right">
            <Link to="/product/save" className="btn btn-primary">
              <i className='fa fa-plus'></i>
              添加商品
            </Link>
          </div>
        </PageTitle>
        <ListSearch onSearch={(searchType, searchKeyword) => {this.onSearch(searchType, searchKeyword)}} />
        <TableList tableHeads={tableHeads}>
          {
            this.state.list.map((product, index) => {
              return (
                <tr key={index}>
                  <td>{product.id}</td>
                  <td>
                    <p>{product.username}</p>
                    <p>{product.subtitle}</p>
                  </td>
                  <td>¥{product.price}</td>
                  <td>
                    <p>{product.status === 1 ? '在售' : '已下架'}</p>
                    <button
                      className="btn btn-xs btn-warning"
                      onClick={(e) => {this.onSetProductStatus(e,product.id,product.status)}}
                    >
                        {product.status === 1 ? '下架' : '上架'}
                    </button>
                  </td>
                  <td>
                    <Link className="opear" to={ `/product/detail/${product.id}` }>详情</Link>
                    <Link className="opear" to={ `/product/save/${product.id}` }>编辑</Link>
                  </td>
                </tr>
              );
            })
          }
        </TableList>
        <Pagination
          current={this.state.pageNum}
          total={this.state.total}
          onChange={(pageNum) => {this.onPageNumChange(pageNum)}}
        />
      </div>
    );
  }
}

export default ProductList;